<!-- 行业组件的封装 -->
<template>
  <!-- 一级 type==0 -->
  <el-select placeholder="请选择" v-model="currentValue" v-if="type==0" :popper-append-to-body="false">
    <el-option v-for="(item,index) in options.trade" :key="index" :label="item.name" :value="item.code">
    </el-option>
  </el-select>
  <!-- 联级的 -->
  <el-cascader v-else v-model="currentValue" :options="options.trade" :appendToBody="false" @change="handleChange"
    :props="{value:'code', label:'name',children:'childVo'}" :show-all-levels="true" placeholder='请选择行业'></el-cascader>

  <!-- 父组件调用 type=0 一级下拉，否则联级下拉-->
  <!-- <HYSelect :value="query.tradeArr" @parentEvent="getHYChild" ref="childDome" :type="1"></HYSelect> -->
</template>
<script>
import { findTradeDict } from '../../../api/index.js';
export default {
  name: 'hy-select',
  // 组件 v-model 值通过 props 传入，必须定义为 value
  props: {
    value: {
      type: [String, Array, Number]
    },
    type: {
      type: [String, Number]
    }
  },
  // props: ['value'],
  data () {
    return {
      // 将传入的 value 在 data 中重新定义赋值，以便子组件改变值（子组件中不能直接修改 props 中的值）
      currentValue: this.value,
      options: {
        trade: []
      }
    }
  },
  computed: {},
  created () { },
  mounted () {
    this.getOptionList();
  },
  // 监听 value：使 value 能在初始化时有值，监听 data（currentValue）：使子组件修改值通知给父组件同步（重要）
  watch: {
    value (newVal) {
      console.log(newVal, '监听的数据')
      this.currentValue = newVal;
    },
    // currentValue: {
    //   handler (newVal, oldVal) {
    //     if (newVal !== oldVal) {
    //       // 子组件通过$emit 给父组件派发事件
    //       this.$emit('parentEvent', this.currentValue)
    //     }
    //   },
    //   immediate: true
    // }
    currentValue (newVal, oldVal) {
      if (newVal !== oldVal) {
        // 子组件通过$emit 给父组件派发事件
        this.$emit('parentEvent', this.currentValue)
      }
    }
  },
  methods: {
    /**
     * 获取行业的下拉数据
     */
    getOptionList () {
      // 获取行业信息
      findTradeDict().then(res => {
        if (res.success) {
          this.options.trade = res.data;
        } else {
          this.$message.error(`${res.msg}`)
        }
      })

    },
    /**
    * change改变后的值，本来监听可以，但父组件有校验时首次监听不走校验
    */
    handleChange (val) {
      this.$emit('parentEvent', val)
    },
    /**
    * 清空内容
    */
    clearContent () {
      this.currentValue = '';
    }
  }
}
</script>
<style scoped>
</style>